<template>
	<div class="Rating-gray" style="display: inline-block;">
		<i v-for="(item,index) in itemClasses" :key="index" :class="item" class="fa fa-star"></i>
	</div>
</template>

<script>
// 星星长度
const LENGTH = 5
// 星星对应的class
const CLS_ON = "fa-star"
const CLS_HALF = "fa-star-half-empty"
const CLS_OFF = "fa-star-o"

export default {
	name: "Rating",
	props: {
		rating: Number
	},
	computed: {
		itemClasses() {
			// 例子：4.8 = 四个全星 + 1个半星
			let result = []
			
			// 对分数进行处理，小数点后面5以下为输出整数，小数点后面5及以上输出为小数
			let score = Math.floor(this.rating * 2) / 2
			
			//计算半星
			let hasDeciml = score % 1 != 0
			
			//一个全星
			let integer = Math.floor(score)
			 
			//全星放入到数组中
			for(let i=0; i < integer; i++) {
				result.push(CLS_ON)
			}
			
			//半星
			if(hasDeciml) {
				result.push(CLS_HALF)
			}
			
			// 补齐没有颜色的星
			while(result.length < LENGTH) {
				result.push(CLS_OFF)
			}
			
			return result
		}
	}
}
</script>

<style scoped>
.Rating-gray {
	margin-right: 1.06vw;
	color: #ffbe00;
	disaplay:inline-block;
}
</style>
